<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 岗位管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input
                    v-model="description"
                    clearable
                    size="mini"
                    style="width: 100px"
                    class="handle-select mr10"
                    placeholder="公司名称"
                ></el-input>
                <el-input
                    v-model="deptDesc"
                    clearable
                    size="mini"
                    style="width: 100px"
                    class="handle-select mr10"
                    placeholder="部门名称"
                ></el-input>
                <el-input
                    v-model="jobDesc"
                    clearable
                    size="mini"
                    style="width: 100px"
                    class="handle-select mr10"
                    placeholder="岗位名称"
                ></el-input>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search"
                    size="mini"
                    >搜索</el-button
                >
            </div>
            <el-button
                @click="toAdd"
                v-if="$_has('role:add')"
                type="primary"
                size="mini"
                style="margin-bottom: 10px"
                >添加岗位</el-button
            >
            <el-button
                @click="batchDelete"
                v-if="$_has('role:batchDelete')"
                type="primary"
                size="mini"
                >批量删除</el-button
            >
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="40"></el-table-column>

                <el-table-column
                    prop="corporateName"
                    label="公司名称"
                    width="150"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="subCorporateName"
                    label="子公司名称"
                    align="center"
                    width="100"
                ></el-table-column>
                <el-table-column
                    prop="deptName"
                    label="部门名称"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="teamName"
                    label="团队"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="industry"
                    label="行业"
                    align="center"
                ></el-table-column>

                <el-table-column
                    prop="jobName"
                    label="岗位"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="technicalItems"
                    label="岗位技术点"
                    align="center"
                    width="100"
                ></el-table-column>
                <el-table-column
                    prop="education"
                    label="学历"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="years"
                    label="工作年限"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="location"
                    label="项目地"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="addr"
                    label="项目地址"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="commutingTime"
                    label="通勤时间"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="interviewer"
                    label="面试官"
                    align="center"
                ></el-table-column>

                <el-table-column
                    prop="createDate"
                    label="创建时间"
                    width="180"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="updateDate"
                    label="修改时间"
                    width="180"
                    align="center"
                >
                </el-table-column>
                <el-table-column prop="state" label="状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.available == false" style="color: red"
                            >禁用
                        </span>
                        <span v-if="scope.row.available == true">启用</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="350">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            v-if="$_has('role:edit')"
                            @click="changeRole(scope.$index, scope.row)"
                            >修改</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    :pager-count="11"
                    layout="prev, pager, next"
                    :current-page="pageCount"
                    :total="total"
                ></el-pagination>
            </div>
        </div>
        <!--//add框-->
        <el-dialog
            title="添加岗位"
            :visible.sync="dialogVisible"
            width="40%"
            :append-to-body="true"
        >
            <!--表单内容-->
            <el-form
                ref="form"
                :model="form"
                label-width="20%"
                :rules="rules"
                :hide-required-asterisk="true"
            >
                <!-- <el-form-item label="公司名称" prop="name">
                    <el-input
                        v-model="form.corporateName"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="公司名称" prop="name">
                    <el-select
                        class="size-full"
                        size="mini"
                        v-model="form.corporateName"
                        placeholder="请选择"
                        clearable
                        style="width: 60%"
                    >
                        <el-option
                            v-for="item in companyOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="子公司名称" prop="name">
                    <el-input
                        v-model="form.subCorporateName"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item label="部门名称" prop="name">
                    <el-input
                        v-model="form.deptName"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item label="团队" prop="name">
                    <el-input
                        v-model="form.teamName"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item label="行业" prop="name">
                    <el-input
                        v-model="form.industry"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="行业" prop="name">
                    <el-select
                        class="size-full"
                        size="mini"
                        v-model="form.industry"
                        placeholder="请选择"
                        clearable
                        style="width: 60%"
                    >
                        <el-option
                            v-for="item in jobOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="岗位" prop="name">
                    <el-input
                        v-model="form.jobName"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="岗位" prop="name">
                    <el-select
                        class="size-full"
                        size="mini"
                        v-model="form.jobName"
                        placeholder="请选择"
                        clearable
                        style="width: 60%"
                        @change="selChange(form.jobName)"
                    >
                        <el-option
                            v-for="item in jobSlect"
                            :key="item.key"
                            :label="item.value"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- <el-form-item label="岗位技术点" prop="name">
                    <el-input
                        v-model="form.technicalItems"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="岗位技术点" prop="name">
                    <el-select
                        class="size-full"
                        size="mini"
                        v-model="form.technicalItems"
                        placeholder="请选择"
                        clearable
                        style="width: 60%"
                    >
                        <el-option
                            v-for="item in stackSlect"
                            :key="item"
                            :label="item"
                            :value="item"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学历" prop="name">
                    <el-input
                        v-model="form.education"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item label="工作年限" prop="name">
                    <el-input
                        v-model="form.years"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item label="项目地" prop="name">
                    <el-input
                        v-model="form.location"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="项目地" prop="name">
                    <el-select
                        class="size-full"
                        size="mini"
                        v-model="form.location"
                        placeholder="请选择"
                        clearable
                        style="width: 60%"
                    >
                        <el-option
                            v-for="item in projectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目地址" prop="name">
                    <el-input
                        v-model="form.addr"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item label="通勤时间" prop="name">
                    <el-input
                        v-model="form.commutingTime"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item label="面试官" prop="name">
                    <el-input
                        v-model="form.interviewer"
                        style="width: 60%"
                        size="mini"
                    ></el-input>
                </el-form-item>

                <el-form-item label="是否有效" prop="state">
                    <el-select
                        class="size-full"
                        size="mini"
                        v-model="form.state"
                        placeholder="请选择"
                        clearable
                        style="width: 60%"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="deviceManage-el-form-item information-el-form-item">
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import getData from "@/getData/api";
export default {
    name: "roleManage",
    data() {
        return {
            checkArr: [], //选中的数组
            description: "",
            deptDesc: "",
            jobDesc: "",
            check: [],
            roleId: "",
            defaultProps: {
                children: "nodes",
                label: "name",
            }, //el-tree配置
            options: [
                {
                    value: 0,
                    label: "失效",
                },
                {
                    value: 1,
                    label: "生效",
                },
            ],
            jobOptions: [], //行业
            companyOptions: [], //公司名称
            projectOptions: [], //项目地
            jobSlect: [], //岗位下拉列表
            stackSlectAll: {}, //技术栈下拉列表全部
            stackSlect: [], //技术栈下拉列表展示
            total: 1,
            tableData: [], //表格DATA
            pageCount: 1, //页数
            dialogVisible: false, //添加用户的弹窗
            form: {
                id: "",
                corporateName: "", //公司名称
                subCorporateName: "", //子公司名称
                deptName: "", //部门名称
                teamName: "", //团队
                industry: "", //行业
                jobName: "", //岗位
                technicalItems: "", //岗位技术点
                education: "", //学历
                years: "", //工作年限
                location: "", //项目地
                addr: "", //项目地址
                commutingTime: "", //通勤时间
                interviewer: "", //面试官
                state: "", //是否有效
            },
            rules: {
                //必填校验
                state: [
                    {
                        required: true,
                        message: "状态不能为空",
                        trigger: "blur",
                    },
                ],
                name: [
                    {
                        // required: true,
                        message: "名称不能为空",
                        trigger: "blur",
                    },
                ],
                description: [
                    {
                        required: true,
                        message: "岗位名称不能为空",
                        trigger: "blur",
                    },
                ],
            },
            multipleSelection: [],
        };
    },
    methods: {
        //批量
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //批量删除
        batchDelete() {
            this.$confirm("确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let ids = [];
                Object.keys(this.multipleSelection).forEach((key) => {
                    ids.push(this.multipleSelection[key].id);
                });
                let params = {
                    ids: ids,
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                }); //转form-data
                getData.jobDele(formData).then((res) => {
                    this.search();
                    if (res.status == 200) {
                        this.$message.success(res.message);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            });
        },
        //翻页触发
        handleCurrentChange(val) {
            //每次翻页都请求数据
            this.pageCount = val;
            this.search();
        },
        //添加角色
        toAdd() {
            if (this.form.id != "") {
                this.initFormData();
            }
            this.dialogVisible = true; //添加角色的弹窗
        },
        //提交添加角色
        onSubmit() {
            //先校验form的必填项
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    console.log(999, this.form);
                    let formData = new FormData();
                    Object.keys(this.form).forEach((key) => {
                        formData.append(key, this.form[key]);
                    }); //转form-data，后台要求
                    if (this.form.id == "") {
                        //id为空就是添加。不为空就是修改
                        getData.jobAdd(formData).then((res) => {
                            this.search();
                            this.dialogVisible = false;
                            if (res.status == 200) {
                                this.$message.success(res.message);
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        getData.jobUpdate(formData).then((res) => {
                            this.search();
                            this.dialogVisible = false;
                            if (res.status == 200) {
                                this.$message.success(res.message);
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },
        //弹出修改角色
        changeRole(index, row) {
            Object.keys(this.form).forEach((key) => {
                this.form[key] = row[key];
            });
            this.dialogVisible = true;
            // console.log(this.form)
        },
        //请求角色List数据
        search() {
            let params = {
                pageNumber: this.pageCount,
                pageSize: 10,
                "rmJobInfo.corporateName": this.description,
                "rmJobInfo.deptName": this.deptDesc,
                "rmJobInfo.jobName": this.jobDesc,
            };
            let formData = new FormData();
            Object.keys(params).forEach((key) => {
                formData.append(key, params[key]);
            }); //转form-data
            getData.jobList(formData).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
            });
        },
        initFormData() {
            //清空新增修改之类的所有数据
            this.form = {
                id: "",
                corporateName: "", //公司名称
                subCorporateName: "", //子公司名称
                deptName: "", //部门名称
                teamName: "", //团队
                industry: "", //行业
                jobName: "", //岗位
                technicalItems: "", //岗位技术点
                education: "", //学历
                years: "", //工作年限
                location: "", //项目地
                addr: "", //项目地址
                commutingTime: "", //通勤时间
                interviewer: "", //面试官
                state: "", //是否有效
            };
        },
        //行业
        getJob1012() {
            let params = {
                typeCode: "1012",
            };
            let formData = new FormData();
            Object.keys(params).forEach((key) => {
                formData.append(key, params[key]);
            }); //转form-data
            getData.findByType(formData).then((res) => {
                if (res.status == 200) {
                    res.data.forEach((v) => {
                        this.jobOptions.push({
                            value: v.codeName,
                            label: v.codeName,
                        });
                    });
                }
            });
        },
        //公司名称
        getJob1011() {
            let params = {
                typeCode: "1011",
            };
            let formData = new FormData();
            Object.keys(params).forEach((key) => {
                formData.append(key, params[key]);
            }); //转form-data
            getData.findByType(formData).then((res) => {
                if (res.status == 200) {
                    res.data.forEach((v) => {
                        this.companyOptions.push({
                            value: v.codeName,
                            label: v.codeName,
                        });
                    });
                }
            });
        },
        //项目地
        getJob1010() {
            let params = {
                typeCode: "1010",
            };
            let formData = new FormData();
            Object.keys(params).forEach((key) => {
                formData.append(key, params[key]);
            }); //转form-data
            getData.findByType(formData).then((res) => {
                if (res.status == 200) {
                    res.data.forEach((v) => {
                        this.projectOptions.push({
                            value: v.codeName,
                            label: v.codeName,
                        });
                    });
                }
            });
        },
        getSelectOption() {
            getData.jobSelect().then((res) => {
                if (res.status == 200) {
                    res.data.forEach((v) => {
                        this.jobSlect.push({
                            key: v.key,
                            value: v.value,
                        });
                        let tempArr = [];
                        v.children.forEach((val) => {
                            tempArr.push(val.value);
                        });
                        this.stackSlectAll[v.key] = tempArr;
                        tempArr = [];
                    });
                }
            });
        },
        selChange(key) {
            this.stackSlect = this.stackSlectAll[key];
        },
    },

    mounted() {
        this.search();
        this.getJob1012();
        this.getJob1011();
        this.getJob1010();
        this.getSelectOption();
    },
};
</script>

<style scoped>
@import "~assets/styles/main.css";
/*搜索框*/
.handle-box {
    margin-bottom: 10px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.del-dialog-cnt {
    font-size: 16px;
    text-align: center;
}
</style>
